<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div id="app">
    {{msg}}
    <!-- 55555 -->
    <h2>{{obj.name}}--{{obj.age}}</h2>
    <h2 class="age-h2">{{obj.age}}</h2>
    <h3 v-text='obj.name'></h3>
    <h4 v-text='msg'></h4>
    <a href=javascript;http://win.web.ra01.sycdn.kuwo.cn/3cd9b161cf052de64b24b6730f33504a/6243f6d9/resource/n3/320/80/27/3017890632.mp3">下载
      </a> <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      </ul>
      <h3>{{msg}}</h3>
      <div v-html='htmlStr'></div>
      <div v-html='obj.fav'></div>
      <input type="text" v-model='msg'>
      <img v-bind:src="imgSrc" v-bind:alt="altTitle">
      <button v-on:click='handlerClick'>按钮1</button>
      <button v-on:click='handlerClick2'>按钮2</button>
      <button @click='handlerClick2'>按钮3</button>
  </div>
</body>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      obj: {
        name: '小马哥',
        age: 19,
        fav: '<h4>前端Vue</h4>'
      },
      msg: 'MVVM实现原理',
      htmlStr: "<h3>hello MVVM</h3>",
      imgSrc: 'http://pic33.nipic.com/20130911/3915497_163714644153_2.jpg',
      altTitle: '眼睛',
      isActive: 'true'
    },
    methods: {
      handlerClick() {
        alert(1);
        console.log(this);

      },
      handlerClick2() {
        console.log(this);
        alert(2)
      }
    }
  })
</script>

</html>